<template>
  <div class="app-container">
    <div class="cloumn">
      <div class="cloumn-title">
        <h3> 分类专栏</h3>
        <h3 @click="handledAdd()" style="cursor: pointer"> 新增</h3>
      </div>
      <div class="cloumn-tabswitch" />
      <div class="column-content">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="categories"
            label="类别"
            width="180"
          />
          <el-table-column
            prop="show"
            label="前台是否显示"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.show"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="handledShow(scope.row)"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="articleCount"
            label="文章数"
          />
          <el-table-column
            align="center"
            label="操作"
            width="280"
          >
            <template slot-scope="scope">
              <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)">
                编辑
              </el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete" @click="handleDelete(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!--表单渲染-->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogPvVisible">
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="temp"
        label-position="left"
        label-width="130px"
        style="width: 400px; margin-left: 60px"
      >
        <el-form-item label="分类专栏名称:" prop="categories">
          <el-input v-model="temp.categories" />
        </el-form-item>
        <el-form-item label="分类专栏简介:" prop="description">
          <el-input type="textarea" :rows="5" v-model="temp.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPvVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
          提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getList, saveType, updateType, detailType, deleteType } from '@/api/column'

export default {
  data() {
    return {
      show: true,
      tableData: [],
      textMap: {
        update: '编辑',
        create: '新增'
      },
      dialogStatus: '',
      temp: {
        categories: '',
        description: ''
      },
      rules: {
        categories: [{ required: true, message: '分类专栏名称', trigger: 'blur' }],
        description: [{ required: true, message: '分类专栏简介', trigger: 'blur' }]
      },
      dialogPvVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getList().then(response => {
        this.tableData = response.payload.list
      })
    },
    resetTemp() {
      this.temp = {
        categories: '',
        description: ''
      }
    },
    handledAdd() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogPvVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveType(this.temp).then(response => {
            this.dialogPvVisible = false
            if (response.code === 20000) {
              this.$notify({
                title: 'Success',
                message: 'Created Successfully',
                type: 'success',
                duration: 2000
              })
            }
            this.fetchData()
          })
        }
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateType(this.temp).then((response) => {
            this.dialogPvVisible = false
            if (response.code === 20000) {
              this.$notify({
                title: 'Success',
                message: 'Update Successfully',
                type: 'success',
                duration: 2000
              })
              this.fetchData()
            }
          })
        }
      })
    },
    handleUpdate(row) {
      this.dialogStatus = 'update'
      this.dialogPvVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      detailType(row.id).then(response => {
        if (response.code === 20000) {
          this.temp = response.payload
        }
      })
    },
    handleDelete(row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteType(row.id).then(response => {
          this.$notify({
            title: 'Success',
            message: 'Delete Successfully',
            type: 'success',
            duration: 2000
          })
        })
      }).catch(() => {
        this.$notify({
          title: '取消',
          message: '已取消删除',
          type: 'info',
          duration: 2000
        })
      })
    },
    handledShow(data) {
      updateType(data).then(() => {
        this.dialogPvVisible = false
        this.$notify({
          title: 'Success',
          message: 'Update Successfully',
          type: 'success',
          duration: 2000
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .cloumn {
    padding: 4px 24px 24px;
    text-align: left;
    color: #000;
    box-sizing: border-box;

    .cloumn-title {
      display: flex;
      justify-content: space-between;
      margin-right: 100px;
    }

    .cloumn-tabswitch {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 12px 0;
      border-bottom: 1px solid #e9e9e9;

      li, a {
        color: #999;
        margin-right: 25px;
        padding-bottom: 14px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: 14px;
        font-weight: 500;
        line-height: 21px;
        border-bottom: 2px solid transparent;
      }

    }

    .column-content {
      .content-title-box {
        font-weight: 400;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-top: 0;
        padding-bottom: 4px;
        line-height: 30px;
        color: #999;
        font-size: 14px;
        border-bottom: 1px solid #e9e9e9;
      }
    }
  }

</style>

